<template>
    <div class="navicate-view">
      <el-menu
        text-color="#003b25"
        background-color="#f0f0f0"
        active-text-color="#00b775"
        :unique-opened="true"
        :default-active="active"
        class="el-menu-vertical-demo"
        :router="true"
      >
        <el-sub-menu v-for="view in views" :index="view.path">
          <template #title>
            <el-icon><component :is="view.icon"></component></el-icon>
            <span>{{ view.name }}</span>
          </template>
          <el-menu-item v-for="item in view.children" :index="item.path">
              {{ item.name }}
          </el-menu-item>
          <el-menu-item v-if="!view.children" :index="view.path">
              {{ view.name }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </template>
  
  <script setup>
  import {
    MilkTea,
    CoffeeCup,
    IceDrink,
    Dessert,
  } from "@element-plus/icons-vue";
  import { ref } from "vue";
  let active = ref("dashboard");
  let views = ref([
    {
      path: "/mhxy/fszh",
      name: "符石组合",
      icon: MilkTea,
      children: [
        {
          path: "/mhxy/fszh/fszl",
          name: "符石种类",
        },
        {
          path: "/mhxy/fszh/gushang",
          name: "固伤",
        },
        {
          path: "/mhxy/fszh/wuli",
          name: "物理",
        },
        {
          path: "/mhxy/fszh/faxi",
          name: "法系",
        }
      ],
    },{
      path: "/mhxy/qjbm",
      name: "奇经八脉",
      icon: CoffeeCup,
      children: [
        {
          path: "/mhxy/qjbm/gushang",
          name: "固伤",
        },
        {
          path: "/mhxy/qjbm/wuli",
          name: "物理",
        },
        {
          path: "/mhxy/qjbm/faxi",
          name: "法系",
        }
      ],
    },{
      path: "/mhxy/zbtj",
      name: "装备推荐",
      icon: IceDrink,
      children: [
        {
          path: "/mhxy/zbtj/gushang",
          name: "固伤",
        },
        {
          path: "/mhxy/zbtj/wuli",
          name: "物理",
        },
        {
          path: "/mhxy/zbtj/faxi",
          name: "法系",
        }
      ],
    },{
      path: "/mhxy/zbtz",
      name: "装备套装",
      icon: Dessert,
      children: [
        {
          path: "/mhxy/zbtz/liliang",
          name: "力量套",
        },
        {
          path: "/mhxy/zbtz/moli",
          name: "魔力套",
        },
        {
          path: "/mhxy/zbtz/minjie",
          name: "敏捷套",
        },{
          path: "/mhxy/zbtz/tizhi",
          name: "体制套",
        },{
          path: "/mhxy/zbtz/naili",
          name: "耐力套",
        }
      ],
    }
  ])
  </script>
  
  <style scoped>
  .el-menu {
    border: none;
    user-select: none;
  }
  .navicate-view {
    width: 160px;
    height: 600px;
    background: #ffffff;
    border-right: 1px solid #cccccc;
    float: left;
  }
  </style>
  